import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { NavLink } from 'react-router-dom';

import { NavBarWrap, NavBarContentWrap } from './style';
import { discoverMenu } from '@/assets/data/loacl_data';

interface IProps {
  children?: ReactNode;
}

const NavBar: FC<IProps> = (props) => {
  return (
    <>
      <NavBarWrap className="navBar">
        <NavBarContentWrap className="w1100">
          <div className="content w980">
            {discoverMenu.map((val) => {
              return (
                <NavLink to={val.link} key={val.title}>
                  {val.title}
                </NavLink>
              );
            })}
          </div>
        </NavBarContentWrap>
      </NavBarWrap>
    </>
  );
};

export default memo(NavBar);
